<template class="listBox">
  <div class="listItem">
    <!--<h3 style="text-align: center">标题</h3>-->
    <!-- el-descriptions是调用了element-ui这一三方库的descriptions组件 -->
    <!--用title来表示列表的表头；border代表列表有无边框-->
    <el-descriptions title="列表模板" border :column="2">
      <!--label表示标签文本；span表示列的数量，用span来调节行列关系，column规定了一行descriptions-item的数量-->
      <el-descriptions-item :label="this.labelArr.label1" span="3">{{listForm.param1}}</el-descriptions-item>
      <el-descriptions-item :label="this.labelArr.label2">{{listForm.param2}}</el-descriptions-item>
      <el-descriptions-item :label="this.labelArr.label3">{{listForm.param3}}</el-descriptions-item>
<!--      <el-descriptions-item :label="this.labelArr.label4">{{param4}}</el-descriptions-item>-->
      <el-descriptions-item :label="this.labelArr.label5" span="2">{{listForm.param5}}</el-descriptions-item>
      <el-descriptions-item :label="this.labelArr.label6">内容六</el-descriptions-item>
    </el-descriptions>
    <el-button @click="getCurrentQuery">读取路由参数</el-button>
  </div>
  <!-- 添加其他元素 -->

  <!-- 总结：
          基础知识点：
          el-descriptions标签：el-descriptions是调用了element-ui这一三方库的descriptions组件
            title --	标题文本，显示在左上方
            border --	是否带有边框
            column --	一行 Descriptions Item 的数量
            label	-- 标签文本
            span -- 列的数量
  -->
</template>

<script>
export default {
  data() {
    return {
      labelArr:{
        label1: '标签一',
        label2: '标签二',
        label3: '标签三',
        label4: '标签四',
        label5: '标签五',
        label6: '标签六',
      },
      listForm:{
        param1: '内容一',
        param2: '内容二',
        param3: '内容三',
        param4: '内容四',
        param5: '内容五',
        param6: '内容六',
      },
      param4:'内容四',
      param4Title: ''
    }
  },
  // 组件初始化前的准备操作，在此处执行
  created() {
    // 事件监听，bus.$on事件一般在此处定义

    // 初始数据载入


  },
  // 组件初始化后需要进行的操作，在此处执行
  mounted() {
    // 组件渲染，传递参数，bus.$emit

  },
  // JS方法
  methods:{
    // 定义函数
    getCurrentQuery() {
      let queryData = this.$route.query
      // 数据格式转化
      console.log(queryData)
      this.labelArr.label1 = '用户名'
      this.listForm.param1 = queryData.username
      this.labelArr.label2 = '爱好'
      this.listForm.param2 = queryData.hobby
      this.labelArr.label3 = '性别'
      this.listForm.param3 = queryData.sex
      this.labelArr.label5 = '技能'
      let skill = ''
      for (let i = 0; i < queryData.skill.length; i++) {
        skill = skill + "  "+ queryData.skill[i]
      }
      this.listForm.param5 = skill
    }
  }
}
</script>

<style scoped>
.listBox {
  width: 100%;
  text-align: center;
}
.listItem {
  width: 100%;
  margin-top: 3%;
}
</style>
